gin解决跨域问题

2023-08-19 05:18| 来源: 网络整理| 查看: 265

为什么会出现跨域问题

再非简单请求且跨域的情况下,浏览器会发送OPTIONS预检请求. Preflighted Requests是CORS中一种透明服务器验证机制.预检请求首先需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,其目的就是为了判断实际发送的请求是安全的.

简单请求

简单请求需满足以下两个条件

请求方法是以下三种方法之一 HEADGETPOST HTTP的头信息不超出以下几种字段 AcceptAccept LanguageLast-Event-IDContent-Type:只限于(application/x-www-form-urlencoded,multipart/form-data,text/plain) 复杂请求

非简单请求即是复杂请求常见的复杂请求有:

请求方法为PUT或DELETEContent-Type字段类型为 application/json添加核外的http header

再跨域的情况下,非简单请求会先发起一次空body的OPTIONS请求,称为"预检"请求,用于向服务器请求权限信息,等预检请求被成功响应后,才会发起真正的http请求. 浏览器的预检请求结果可以通过Access-Control-Max-Age进行缓存

问题复现 index.html DOCTYPE html> Title 请求数据 $("#query").click(function () { $.ajax( { url:"http://127.0.0.1:8080/ping", dataType: "json", type: "get", contentType:"application/json;charset=utf-8", success: function (result) { console.log(resulssage); $("#content").text(resulssage) }, error: function (data) { alert("请求出错") } } ); }); main.go package main import ( "github.com/gin-gonic/gin" ) func main() { r := gin.Default() r.GET("/ping", func(c *gin.Context) { c.JSON(200, gin.H{ "message": "pong", }) }) r.Run() // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080") }

在这里插入图片描述

在这里插入图片描述一共发了两次/ping请求,一次返回CORS error,一次GET请求变成了OPTIONS请求,导致的404. 当前请求主要是因为前端再63342端口,后端再8080端口形成跨域,并且Content-Type字段类型为 application/json为非简单请求造成的跨域问题

解决方案 package main import ( "github.com/gin-gonic/gin" "net/http" ) func main() { r := gin.Default() r.Use(Cors()) r.GET("/ping", func(c *gin.Context) { c.JSON(200, gin.H{ "message": "pong", }) }) r.Run() // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080") } func Cors() gin.HandlerFunc { return func(context *gin.Context) { method := context.Request.Method context.Header("Access-Control-Allow-Origin", "*") context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token, x-token") context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT") context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type") context.Header("Access-Control-Allow-Credentials", "true") if method == "OPTIONS" { context.AbortWithStatus(http.StatusNoContent) } } }

在这里插入图片描述

【本文地址】

公司简介

联系我们